<template>
    <!-- <el-breadcrumb style="line-height: 40px position: relative;">
      <el-breadcrumb-item :to="{ path: '/student/smy' }"
        ><i class="el-icon-back" style="cursor: pointer"></i
        ><span
          style="
            line-height: 40px;
            cursor: pointer;
            font-weight: 400;
            font-size: 20px;
            color: #ccc;
          "
          class="back"
        >
          返回</span
        ></el-breadcrumb-item
      >
      <el-breadcrumb-item
        style="position: absolute; left: 48%; line-height: 40px"
      >
        <span style="font-weight: 400"> {{ testName }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item
        style="position: absolute; right: 5%; line-height: 40px"
      >
        <span style="font-weight: 400">总成绩:{{ score }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb> -->

    <el-container class="container">
      <!-- 头部 -->
      <!-- <el-header class="header">
        <div class="headerSon">
          <div class="headerSonLeft">
            <img src="@/assets/main/logo.png" alt="" width="40" style="margin-top: -4px" />
            <span style="margin-left: 20px">Online Exam</span>
          </div>
          <div class="line"></div>
          <div class="headerSonLeft">
            <img src="@/assets/main/portrait.png" alt="" width="20" style="margin-top: 3px" />
            <span style="margin-left: 10px">
              <span style="color: #f7cb4d">{{ msg }}</span>
            </span>
          </div>
        </div>
      </el-header> -->
      <el-header style="height: 60px">
        <!-- logo -->
        <!-- 导航栏  @select="handleSelect" -->
        <!-- <el-menu
        default-active="/sxq"
        class="el-menu-demo"
        style="width: 500px"
        mode="horizontal"
        background-color="rgb(0,21,41)"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/student/sexam">
          <i class="el-icon-collection"></i>
          <span class="ming">考试管理</span>
        </el-menu-item>
        <el-menu-item index="/sxq" >
          <i class="el-icon-s-claim"></i>
          <span class="ming">我的考试</span>
        </el-menu-item> -->
        <!-- <div> -->
        <el-breadcrumb style="line-height: 60px; position: relative">
          <el-breadcrumb-item :to="{ path: '/student/smy' }">
            <span
              style="
                line-height: 60px;
                cursor: pointer;
                font-weight: 400;
                font-size: 20px;
                color: #fff;
              "
              class="back el-icon-back"
            >
              返回</span
            >
          </el-breadcrumb-item>
          <el-breadcrumb-item
            style="position: absolute; left: 46%; line-height: 60px"
          >
            <span style="font-weight: 400; color: #fff"> {{ testName }}</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item
            style="position: absolute; right: 15%; line-height: 60px"
          >
            <span style="font-weight: 400; color: #fff"
              >总成绩:{{ score }}</span
            >
          </el-breadcrumb-item>
          <el-breadcrumb-item
            style="position: absolute; right: 0%; line-height: 60px"
          >
            <span style="font-weight: 400; color: #fff">用户名</span>
          </el-breadcrumb-item>
          <!-- 用户显示信息 -->
          <!-- <div class="user"> -->
          <!-- <img src="../../assets/pic.jpg" alt="" class="pic" /> -->
          <!-- <el-dropdown> -->
          <!-- <p class="username">西门吹雪</p> -->
          <!-- </el-dropdown> -->
          <!-- </div> -->
        </el-breadcrumb>
        <!-- </el-menu> -->

        <!-- </div> -->
      </el-header>
      <el-container>
        <!-- 侧边栏的菜单rgb(0,21,41) -->
        <el-menu
          background-color="#fff"
          text-color="#333"
          :default-active="$route.path"
          unique-opened
          class="aside-menu"
          router
        >
          <!-- 单选题 -->
          <el-submenu index="1">
            <template slot="title"
              ><i class="iconfont icon-danxuantiankong"></i
              ><span class="zt">单选题(每题五分)</span></template
            >
            <el-menu-item
              v-for="item in radioList"
              :key="item.id"
              :index="'/sxq/MyRadio/' + item.id"
            >
              <i class="iconfont icon-dati"></i
              ><span class="zt">题目{{ item.id }}</span>
            </el-menu-item>
          </el-submenu>
          <!-- 多选题 -->
          <el-submenu index="2">
            <template slot="title"
              ><i class="iconfont icon-multiselect"></i
              ><span class="zt">多选题(每题五分)</span></template
            >
            <el-menu-item
              v-for="item in multiList"
              :key="item.id"
              :index="'/sxq/MyMultiSelect/' + item.id"
            >
              <i class="iconfont icon-dati"></i
              ><span class="zt">题目{{ item.id }}</span>
            </el-menu-item>
          </el-submenu>
          <!-- 判断题 -->
          <el-submenu index="3">
            <template slot="title"
              ><i class="iconfont icon-panduanti"></i
              ><span class="zt">判断题(每题五分)</span></template
            >
            <el-menu-item
              v-for="item in judgeList"
              :key="item.id"
              :index="'/sxq/MyJudge/' + item.id"
            >
              <i class="iconfont icon-dati"></i
              ><span class="zt">题目{{ item.id }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <el-container>
          <!-- 主体 -->
          <el-main class="main">
            <div class="tbody">
              <!-- <div class="BoxTime">
                <el-form-item id="time-label" label="总成绩"></el-form-item>
              </div> -->
              <router-view></router-view>
            </div>
            <div class="btns">
              <el-button
                class="btn1"
                type="success"
                @click="preSubject"
                :disabled="pre"
                >上一题</el-button
              >&nbsp;&nbsp;
              <el-button
                class="btn2"
                type="success"
                @click="nextSubject"
                :disabled="next"
                >下一题</el-button
              >
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ExamView',
  data () {
    return {
      msg: '学生姓名',
      // activeIndex: 'problem',
      activeIndex2: '/exam/MyRadio/1',
      testName: '当前考试名称',
      score: 0,
      pre: true,
      next: false
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 上一题
    preSubject () {
      if (this.studentPath == '/sxq/MyMultiSelect/1') {
        this.$router.push({
          path: '/sxq/MyRadio/' + this.radioList.length
        })
      } else if (this.studentPath == '/sxq/MyJudge/1') {
        this.$router.push({
          path: '/sxq/MyMultiSelect/' + this.multiList.length
        })
      } else {
        let path = this.$route.path
        const patharr = path.split('/')
        const num = patharr[3] * 1 - 1
        patharr[3] = num
        path = patharr.join('/')
        this.$router.push({
          path: path
        })
      }
    },
    // 下一题
    nextSubject () {
      console.log(this.studentPath)
      if (this.studentPath == '/sxq/MyRadio/' + this.radioList.length) {
        this.$router.push({
          path: '/sxq/MyMultiSelect/1'
        })
      } else if (
        this.studentPath ==
        '/sxq/MyMultiSelect/' + this.multiList.length
      ) {
        this.$router.push({
          path: '/sxq/MyJudge/1'
        })
      } else {
        let path = this.$route.path
        const patharr = path.split('/')
        console.log(patharr)
        const num = patharr[3] * 1 + 1
        patharr[3] = num
        path = patharr.join('/')
        this.$router.push({
          path: path
        })
      }
    }
  },
  computed: {
    // ...mapState('smy', ['radioList', 'multiList', 'judgeList'])

    ...mapState({
      radioList: (state) => state.smy.radioList,
      multiList: (state) => state.smy.multiList,
      judgeList: (state) => state.smy.judgeList
    }),
    studentPath () {
      return this.$route.path
    }
  },
  watch: {
    // 监听路径判断下一题按钮和上一题按钮是否可用
    studentPath: {
      immediate: true,
      handler (newvalue, oldvalue) {
        if (newvalue == '/sxq/MyRadio/1') {
          this.pre = true
          this.next = false
        } else if (newvalue == '/sxq/MyJudge/' + this.judgeList.length) {
          this.pre = false
          this.next = true
        } else {
          this.pre = false
          this.next = false
        }
      }
    }
  }
}
</script>

<style >

body {
  margin: 0;
  /* text-decoration: none; */
}
.container{
  width: 100%;
  height: 100%;
}
a {
  text-decoration: none;
  /* color: #fff; */
}
.el-breadcrumb {
  width: 100%;
  height: 40px;
}
.el-breadcrumb__separator {
  margin: 0;
  opacity: 0;
}
.back:hover {
  color: #41aadbe0 !important;
}
.tbody {
  background: #fff;
  width: 100%;
  height: 91% !important;
  /* padding: 25px 25px; */
  /* margin-top: 40px; */
  /* padding-top: 22px; */
  /* box-sizing: border-box; */
  /* height: 750px; */
  /* box-shadow: 1px 1px 2px 2px #e8e8e8; */
}
</style>

<style lang="scss" scoped>
$bgColor: #0b2a33;
$textColor: #0c8fb3;
$bgColor: #0b2a33;
$textColor: #0c8fb3;
// .is-active {
//   color: #7f9193;
// }
.header {
  width: 100%;
  height: 10vh;
  overflow: hidden;
  background-color: $bgColor;

  .headerSon {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    color: $textColor;
    font-size: 20px;
    font-weight: 600;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    .headerSonLeft {
      display: flex;
      align-items: center;
    }
    .el-menu--horizontal > .el-menu-item {
      color: #ececec;
      font-size: 15px;
    }
    .el-menu--horizontal > .el-menu-item:hover {
      background-color: #41aadbe0;
      color: #000;
      font-weight: bold;
    }
    .is-active {
      background-color: #4a9fdccb;
      color: #000;
    }
    .el-menu-demo {
      background-color: $bgColor;
      margin-left: -255px;
    }
    .el-icon-set-up {
      color: #fff;
    }
    .el-icon-connection {
      color: #fff;
    }

    .el-icon-notebook-2 {
      color: #fff;
    }
    .el-menu--horizontal > .el-menu-item:hover > .el-icon-set-up,
    .el-menu--horizontal > .el-menu-item:hover > .el-icon-connection,
    .el-menu--horizontal > .el-menu-item:hover > .el-icon-notebook-2 {
      color: #000;
    }
  }
}
.aside-menu {
  box-sizing: border-box;
  width: 235px;
  height: 85vh;
  .el-submenu {
    // .item1 {
    //   color: #551a8b;
    // }
    .zt {
      font-size: 18px;
      font-family: LiSu;
    }
  }
}
.el-breadcrumb {
  margin: 5px;
  // width: 300px;
  // height: 40px;
  span {
    font-size: 25px;
    font-weight: bold;
    color: #000;
  }
}
.main {
  width: 90%;
  // background-color: #eee;
  // color: #333;
  // padding: 20px 10px 50px 25px;
  padding: 25px 25px;
  box-sizing: border-box;
  // height: 80vh;
  border: 10px solid #eee;
  // box-shadow: 1px 1px 2px 2px #e8e8e8;
  .btns {
    margin-top: 20px;
    float: right;
  }
}
.el-header {
  background: rgb(0, 21, 41);
  height: 70px !important;
  // height: 8%;
  display: flex;
  justify-content: space-around;

  .el-menu-item {
    margin: 5px;
  }
  .el-submenu__title:hover,
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: rgba(169, 177, 181, 0.5) !important;
  }
}

// .active {
//   background-color: rgba(169, 177, 181, 0.5);
//   border-bottom: 1px solid yellow;
//   color: yellow;
// }
.ming {
  font-size: 18px;
}
/* 显示用户信息 */
.pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* padding-top: 8px; */
}
.mainbox {
  padding: 0;
}
.user {
  display: flex;
  justify-content: flex-start;
  padding-top: 5px;
}
.user img {
  text-align: center;
}
.username {
  padding-top: 19px;
  color: white;
  padding-left: 10px;
}
</style>
